<template>
  <div class="container" style="width:98vw;height:100vh;background:skyblue; ">
    <div style="width:70vw;height:70vh;margin:auto;background:#fff; border-radius:10px;">
      <div style="float:left">
        <img :src="imgSrc" alt="">
      </div>
      <div style="float:right;width: 40vw; position: relative;">
          <h4>登录页面</h4>
         
    <div v-show="isshow==1" class="form">
    <img :src="img_erweima1"   @click="open()" style="position:absolute;top:0px;right:0px;">
  用户名：<el-input v-model="user" placeholder="请输入内容"></el-input>
  <br>  <br> 
 密码： &emsp;<el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
    <br>  <br>
验证码：<el-input placeholder="请输入验证码" v-model="yzm" id="yzm"></el-input><br>  <br>


 验证码：<el-tag v-html="yzm_str" size="medium" ></el-tag> 
<button @click="yzmfun()">获取</button>


    <br>  <br>
 <el-button type="primary" round  @click="btnfun()">登录home页</el-button>
  </div>

<div v-show="isshow==2">
<img :src="img_erweima2" alt="" width="50%"><br><br>
<el-button type="primary" size="mini" @click="isshow=1">切换输入登录</el-button>
</div>

      </div>
     
    </div>

  </div>
</template>

<script>
// 局部引入
// import axios from 'axios'
export default {
  data() {
    return {
      imgSrc:require('../../assets/axios_img/zuo.png'),
      img_erweima1:require('../../assets/axios_img/微信登录切换@2x.png'),
      img_erweima2:require('../../assets/axios_img/微信二维码@2x.png'),
      user:'',
      pwd:'',
      yzm:'',
      yzm_str:'',
      isshow:1
    }
  },
  created(){
      this.yzmfun()
  },
  methods:{
    yzmfun(){
      //  // axios.get获取验证码，获取不用传参
      // axios.get('http://47.94.4.201/index.php/index/index/getcode').then((res)=>{
      //   // console.log(res) //获取参数
      //   /* 首先status(状态码)可以判断服务器有没有挂掉，每一个axios请求都要判断 */
      //   if(res.status==200){
      //       this.yzm_str = res.data.msg
      //   }else if(res.status==404){
      //     alert('页面找不到了')
      //   }else if(res.status==500){
      //     alert('内部服务器错误')
      //   }
      // })
    this.$apiGet('http://47.94.4.201/index.php/index/index/getcode').then((res)=>{
      // console.log(res)
        this.yzm_str = res.msg
    })

    },
    btnfun(){
       // window.location.href='http://localhost:8080/#/' //页面重加载，影响性能
      // this.$router.push({path:'/'})
      // this.$router.replace({path:'/'})

       //.catch(()=>{})抛出问题，以免报错 ,二级导航容易发生报错
    // let obj = {
    //     user:'你好',
    //     pwd:'666666'
    //   };
    sessionStorage.setItem('erdao','88888888') 
    //   sessionStorage.setItem('erdao',JSON.stringify([obj])) //先储存再跳转页面
    //   this.$router.push({name:'home'}).catch(()=>{})

    // // 点击登录，获取参数，访问接口，post传参
    // // this.$axios({}) //main.js中全局引入
    // axios({
    //   method:'post',
    //   url:'http://47.94.4.201/index.php/index/index/login',
    //   data:{
    //     vercode:this.yzm,
    //     name:this.user,
    //     pwd:this.pwd,
    //   }
    // }).then((res)=>{
    //   if(res.data.code==0){
    //      console.log(res)
    //      this.$router.push({name:'home'})
    //   }else if(res.data.code==3){
    //     alert('验证码不通过')
    //   }else if(res.data.code==2){
    //     alert('用户或密码不能为空')
    //   }else if(res.data.code==1){
    //     alert('登陆失败')
    //    console.log(res)
    //   }
     
    // })




// 若后端要求严格，可以先将数据序列化一下，也就是格式化
    let objstr =this.$qs.stringify({
        vercode:this.yzm,
        name:this.user,
        pwd:this.pwd,
    })
    console.log(objstr)
   this.$apiPost('http://47.94.4.201/index.php/index/index/login',objstr).then((res)=>{
      if(res.code==0){
         console.log(res)
         this.$router.push({name:'home'}).catch(()=>{})
      }else if(res.code==3){
        alert('验证码不通过')
      }else if(res.code==2){
        alert('用户或密码不能为空')
      }else if(res.code==1){
        alert('登陆失败')
       console.log(res)
      }
   })

    },
    open(){
        this.isshow==1?this.isshow=2:this.isshow=1
    }
  },
  components: {

  }
}
</script>

<style scoped>
 #app nav{
        display: none;
    }
.el-input{
  width:70%;


 
}
.el-input #yzm{
   width:40%;
  
 
}
</style>
